<!--跳转 报警信息详情-编辑、预览 页面-->


<!--报警信息详情 列表-->
<div id="content">

    <app-add-alarm-detail *ngIf="editFlag" [selectEditData]="selectEditData" [option]="option"
        (result)="cancel($event)">
    </app-add-alarm-detail>

    <div *ngIf="!editFlag">
        <div style="width: 100%; min-height: 35px; margin: 10px;">
            <div style="width: 60%; float: left;">
                <!-- <SearchBar [placeholder]="'输入关键字搜索'" [setFocus]="autoFocus" [(ngModel)]="searchValue"
                    (ngModelChange)="search()" (onCancel)="cancel()">
                </SearchBar> -->
                <div class="item-input-inset" style="padding: 0">
                    <label class="item-input-wrapper">
                        <i class="icon ion-ios-search placeholder-icon"></i>
                        <ion-input type="search" placeholder="输入关键字搜索" [(ngModel)]="searchValue" (ionChange)="search()"
                            (ionFocus)=" this.inputFocus = true; " (ionBlur)=" this.inputFocus = false; "></ion-input>
                    </label>
                    <ion-button *ngIf="inputFocus" class="button cancel-btn" size="small" fill="clear"
                        (click)="cancel()">
                        取消
                    </ion-button>
                </div>
            </div>
            <div Button [size]="'small'" [type]="'primary'" (click)="getAlarmList()"
                style="width: 15%; margin-left: 5%; float: left;">刷新
            </div>
        </div>
        <!-- <WhiteSpace [size]="'lg'"></WhiteSpace> -->
        <ActivityIndicator [toast]="true" [text]="'加载中...'" [animating]="loading"></ActivityIndicator>
        <!-- <table style="width: 100%; border-collapse:separate; border-spacing:0px 15px; table-layout: fixed;">
            <thead>
                <tr>
                    <th style="width: 10px;">#</th>
                    <th style="width: 60px;">预警名称</th>
                    <th style="width: 60px;">设备名称</th>
                    <th style="width: 60px;">属性名称</th>
                    <th style="width: 60px;">报警条件</th>
                    <th style="width: 60px;">报警级别</th>
                    <th style="width: 60px;">添加时间</th>
                    <th style="width: 35px;">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of alarmList">
                    <td>{{alarmList.indexOf(data) + 1}}</td>
                    <td>{{data.name}}</td>
                    <td>{{data.strategy.device.name}}</td>
                    <td>{{data.strategy.attribute.name}}</td>
                    <td>{{ data.strategy.attribute.name }}{{ data.strategy.conditiona.key }}{{ data.strategy.conditiona.value }};
                        <p *ngIf="data.strategy.conditionb.value">
                            {{ data.strategy.attribute.name }}{{ data.strategy.conditionb.key }}{{ data.strategy.conditionb.value }}
                    </td>
                    <td>
                        <p style="color:gold" *ngIf="data.strategy.level==0">提醒</p>
                        <p style="color:rgb(243, 193, 118)" *ngIf="data.strategy.level==1">警报</p>
                        <p style="color:rgb(255, 0, 0)" *ngIf="data.strategy.level==2">严重</p>
                    </td>
                    <td>{{data.time | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                    <td>
                        <a (click)="editOrPreview(data.key,'preview')"><i nz-icon nzType="zoom-in"
                                nzTheme="outline"></i>预览</a>
                    </td>
                </tr>
            </tbody>
        </table> -->


        <WingBlank>
            <Card *ngFor="let data of alarmList" style="margin: 10px 0px 10px 0px;">
                <CardHeader [title]="data.name" class="title" [extra]="extra"
                    [ngStyle]="{'background-color': data.strategy.level==0?'gold':data.strategy.level==1?'rgb(253, 152, 0)':'rgb(255, 0, 0)' }">
                </CardHeader>
                <ng-template #extra>
                    <!-- <a (click)="editOrPreview(data.key,'preview')"><i nz-icon nzType="zoom-in" nzTheme="outline"></i>预览</a> -->
                </ng-template>
                <CardBody style="padding: 0px 0px 5px;" (click)="editOrPreview(data.key,'preview')"
                    [ngStyle]="{'border': data.strategy.level==0?'1px solid gold':data.strategy.level==1?'1px solid rgb(243, 193, 118)':'1px solid rgb(255, 0, 0)'}">
                    <div id="contentCard">
                        <!-- <ul style="padding: 10px;">
                        <li>预警名称</li>
                        <li>{{data.name}}</li>
                        <li>设备名称</li>
                        <li>{{data.strategy.device.name}}</li>
                        <li>属性名称</li>
                        <li>{{data.strategy.attribute.name}}</li>
                        <li>报警条件</li>
                        <li>{{ data.strategy.attribute.name }}{{ data.strategy.conditiona.key }}{{ data.strategy.conditiona.value }};
                            <p *ngIf="data.strategy.conditionb.value">
                                {{ data.strategy.attribute.name }}{{ data.strategy.conditionb.key }}{{ data.strategy.conditionb.value }}</p>
                        </li>
                        <li>报警级别</li>
                        <li>
                            <p style="color:gold" *ngIf="data.strategy.level==0">提醒</p>
                            <p style="color:rgb(253, 152, 0)" *ngIf="data.strategy.level==1">警报</p>
                            <p style="color:rgb(255, 0, 0)" *ngIf="data.strategy.level==2">严重</p>
                        </li>
                        <li>添加时间</li>
                        <li>{{data.time | date:'yyyy-MM-dd HH:mm:ss'}}</li>
                    </ul> -->

                        <table
                            style="width: 100%; border-collapse:separate; border-spacing:0px 15px; table-layout: fixed; border: 0px; padding: 0px 10px">
                            <tbody>
                                <tr>
                                    <td>预警名称</td>
                                    <td>{{data.name}}</td>
                                </tr>
                                <tr>
                                    <td>设备名称</td>
                                    <td>{{data.strategy.device.name}}</td>
                                </tr>
                                <tr>
                                    <td>属性名称</td>
                                    <td>{{data.strategy.attribute.name}}</td>
                                </tr>
                                <tr>
                                    <td>报警条件</td>
                                    <td>{{ data.strategy.attribute.name }}{{ data.strategy.conditiona.key }}{{ data.strategy.conditiona.value }};
                                        <p *ngIf="data.strategy.conditionb.value">
                                            {{ data.strategy.attribute.name }}{{ data.strategy.conditionb.key }}{{ data.strategy.conditionb.value }}
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>报警级别</td>
                                    <td>
                                        <p style="color:gold" *ngIf="data.strategy.level==0">提醒</p>
                                        <p style="color:rgb(253, 152, 0)" *ngIf="data.strategy.level==1">警报</p>
                                        <p style="color:rgb(255, 0, 0)" *ngIf="data.strategy.level==2">严重</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>添加时间</td>
                                    <td>{{data.time | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </CardBody>
            </Card>
        </WingBlank>
    </div>
</div>